<!--  -->
<template>
  <div>
    <div class="pay-list" v-if="payData.length > 0">
    <block v-for="(item,index) in payData" :key="index">
      <div class="pay-item">
        <div class=" flex-a-c flex-j-sb">
          <div class="pay-serial">
            <div class="pay-order flex-a-c">
              <h3>{{item.order_sn}}</h3>
              <div class="pay-status pay-red" v-if="item.status === 1">{{item.status_name}}</div>
              <div class="pay-status " v-else>{{item.status_name}}</div>
            </div>
            <p>{{item.created_at}}</p>
          </div>
          <div class="pay-deatil flex-a-c" @click="recordOn(item.id)">
            <span>查看详情</span>
            <span class="iconfont icon-advertise-next"></span>
          </div>
        </div>
        <div class="pay-bottom flex-a-c flex-j-sa">
          <div class="pay-details">
            <p>扣款总周期</p>
            <h3>{{item.deduct_total_cycle}}月</h3>
          </div>
          <div class="pay-details">
            <p>已扣款周期</p>
            <h3>{{item.deduction_log && item.deduction_log.deduction_count || 0}}月</h3>
          </div>
          <div class="pay-details">
            <p>已扣款金额</p>
            <h3>{{item.deduction_log && item.deduction_log.deduction || '0.00'}}</h3>
          </div>
        </div>
      </div>
    </block>
  </div>
  <van-empty description="暂无数据" v-else/>
  </div>
  
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
props:['payData'],
name:'payList',
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  recordOn(id) {
    this.$emit('recordClick', id);
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.pay-list {
  padding: 0 12px;

  .pay-item {
    border-radius: 4px;
    background: #fafafa;
    padding: 12px;
    margin: 0 0 8px 0;

    .pay-serial {
      .pay-order {
        h3 {
          font-size: 16px;
          color: #00001c;
          // padding-right: 4px;
          padding: 0 4px 2px 0;
        }

        .pay-status {
          padding: 4px 8px;
          border-radius: 2px;
          color: #fff;
          font-size: 11px;
          line-height: 11px;
          background: #d6d6dc;
        }

        .pay-red {
          background: #f15353;
        }
      }

      p {
        font-size: 13px;
        color: #aaaab3;
        text-align: left;
      }
    }

    .pay-deatil {
      color: #f15353;
    }

    .pay-bottom {
      padding: 8px 0 0 0;

      .pay-details {
        font-size: 14px;
        line-height: 14px;
        color: #f15353;

        p {
          font-size: 12px;
          line-height: 12px;
          color: #aaaab3;
          padding-bottom: 8px;
        }

        h3 {
          font-size: 14px;
          font-weight: 600;
          // line-height: 24px;
          color: #00001c;
        }
      }
    }
  }
}

/* @import url(); 引入公共css类 */

</style>